<div style="display: flex;flex-direction: row">
  <nz-card>
    <!--    <label nz-checkbox [(ngModel)]="typeCheckAll" (ngModelChange)="getAllType()">全选</label>-->
    <nz-tree
      *ngIf="GoodsTypeList.length"
      [nzData]="GoodsTypeList"
      nzCheckable
      nzMultiple
      [nzExpandAll]="true"
      [nzCheckedKeys]="queryForm.type"
      [nzTreeTemplate]="nzTreeTemplate"
      (nzCheckBoxChange)="typeChange($event)"
    >
      <ng-template #nzTreeTemplate let-node let-origin="origin">
        <span class="custom-node" style="display: inline-block;width: 120px">
          {{origin.title}}<span *ngIf="origin.state === 0" style="color: red">禁用</span>
        </span>
      </ng-template>
    </nz-tree>
  </nz-card>
  <div style="width: calc(100% - 320px)">
    <nz-card>
      <div class="common-search-wrap">
        <div class="common-search-forms">
          <div class="common-form-item">
            <label class="common-search-label">商品</label>
            <div class="common-search-conrol">
              <input
                type="text"
                nz-input
                placeholder="编码/69码/名称"
                [(ngModel)]="queryForm.code"
              />
            </div>
          </div>
          <div class="common-form-item">
            <label class="common-search-label">品牌</label>
            <div class="common-search-conrol">
              <nz-select
                nzShowSearch
                nzAllowClear
                nzMode="multiple"
                [nzMaxTagCount]="1"
                nzPlaceHolder="请选择"
                [(ngModel)]="cacheData.brandIdList"
                (ngModelChange)="onSelectBrandAll($event)">
                <nz-option nzLabel="全部" nzValue="all"></nz-option>
                <nz-option nzValue="{{ data.id }}" nzLabel="{{ data.name }}" *ngFor="let data of BrandList"></nz-option>
              </nz-select>
            </div>
          </div>
          <div class="common-form-item">
            <label class="common-search-label">更新时间</label>
            <div class="common-search-conrol">
              <nz-range-picker [nzFormat]="'yyyy-MM-dd'" [(ngModel)]="queryForm.dateFormat"></nz-range-picker>
            </div>
          </div>
          <div class="common-form-item">
            <label nz-checkbox [(ngModel)]="queryForm.exsistBom">有BOM信息</label>
          </div>
          <div class="common-form-item">
            <label nz-checkbox [(ngModel)]="queryForm.exsistSN">启用SN管控</label>
          </div>
          <div class="common-form-item">
            <label nz-checkbox [(ngModel)]="queryForm.exsistWarning">有预警值</label>
          </div>

          <div class="common-form-item">
            <div class="common-search-conrol">
              <button nz-button nzType="primary" class="m-r-8" [nzLoading]="tableLoading" (click)="query()">查询</button>
              <button nz-button nzType="default" (click)="resetTable()">重置</button>
              <!--              <button nz-button nzType="link" (click)="isCollapse = !isCollapse">-->
              <!--                {{ isCollapse ? '收起' : '展开' }}<i nz-icon [nzType]="isCollapse ? 'up' : 'down'" nzTheme="outline"></i>-->
              <!--              </button>-->
            </div>
          </div>
        </div>
      </div>
    </nz-card>

    <nz-card class="pagination-wrap-position m-t-2">
      <div class="operation-wrap">
        <button nz-button nzType="primary" class="m-r-8" [routerLink]="['/storage-center/storageCommodityAdd']">新增商品
        </button>
      </div>

      <div class="table-wrap p-t-15">
        <nz-table
          #basicTable
          nzSize="small"
          nzShowSizeChanger
          nzShowQuickJumper
          nzOuterBordered
          [nzScroll]="{ x: '1100px' }"
          [nzFrontPagination]="false"
          [nzLoadingDelay]="100"
          [nzLoading]="tableLoading"
          [nzData]="listOfData?.records"
          [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
          [nzTotal]="listOfData?.total"
          [nzPageIndex]="listOfData?.current"
          [nzPageSize]="listOfData?.size"
          [nzShowTotal]="totalTemplate"
          (nzPageIndexChange)="onPageIndexChange($event)"
          (nzPageSizeChange)="onPageSizeChange($event)">
          <thead>
          <tr>
            <th nzAlign="center" nzWidth="120px" nzLeft>编码</th>
            <th nzAlign="center" nzWidth="120px">状态</th>
            <th nzAlign="center" nzWidth="120px">69码</th>
            <th nzAlign="center" nzWidth="110px">图片</th>
            <th nzAlign="center" nzWidth="210px">名称</th>
            <th nzAlign="center" nzWidth="110px">预警值</th>
            <th nzAlign="center" nzWidth="110px">分类</th>
            <th nzAlign="center" nzWidth="110px">品牌</th>
            <th nzAlign="center" nzWidth="110px">BOM信息</th>
            <th nzAlign="center" nzWidth="110px">SN管控</th>
            <th nzAlign="center" nzWidth="110px">最后更新时间</th>
            <th nzAlign="center" nzWidth="200px" nzRight>操作</th>
          </tr>
          </thead>

          <tbody>
          <tr *ngFor="let data of basicTable.data; let index = index;"
              [ngStyle]="{color: data.state === 0?'#999999':''}">
            <!-- 编码 -->
            <td nzAlign="center" nzLeft>{{data.goodsCode || '-'}}</td>
            <!-- 状态 -->
            <td nzAlign="center">{{data.state === 1 ? '启用' : '禁用'}}</td>
            <!-- 69码 -->
            <td nzAlign="center">{{data.code}}</td>
            <!-- 图片 -->
            <td nzAlign="center">
              <img nz-image width="42px" height="42px" nzSrc="{{data.img}}" [nzFallback]="fallback"/>
            </td>
            <!-- 商品名称 -->
            <td nzAlign="left">{{data.name || '-'}}</td>
            <!-- 预警值 -->
            <td nzAlign="center">{{data.earlyWarning ? data.earlyWarning : '-'}}</td>
            <!-- 分类 -->
            <td nzAlign="center">{{data.typeName}}</td>
            <!-- 品牌 -->
            <td nzAlign="center">{{data.brandName}}</td>
            <!-- BOM信息 -->
            <td nzAlign="center">{{data.bomListMessage}}</td>
            <!-- SN管控 -->
            <td nzAlign="center">{{data.snState === 0 ? '启用' : '禁用'}}</td>
            <!-- 最后更新时间 -->
            <td nzAlign="center">{{data.updateTime}}</td>
            <td nzAlign="center" nzRight>
              <a nz-button nzType="link" [routerLink]="['/storage-center/storageCommodityAdd']"
                 [queryParams]="{id: data.id}"
                 *ngIf="permission.userPermission.has('stock:warehouseGoods:edit')">编辑</a>
              <!--              <button nz-button nzType="link" [routerLink]="['../warehouseGoodsAdd', data.id]"-->
              <!--                      *ngIf="permission.userPermission.has('stock:warehouseGoods:check')"-->
              <!--                      [disabled]="data.state != 1">审核-->
              <!--              </button>-->
              <a nz-button nzType="link" nzDanger nz-popconfirm nzPopconfirmTitle="确认删除吗?"
                 *ngIf="permission.userPermission.has('stock:warehouseGoods:delete')"
                 [nzIcon]="iconTpl" (nzOnConfirm)="confirm(data.id)">删除</a>
              <ng-template #iconTpl>
                <i nz-icon nzType="question-circle-o" style="color: red;"></i>
              </ng-template>
            </td>
          </tr>
          </tbody>
        </nz-table>

        <!-- 分页template -->
        <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
      </div>
    </nz-card>
  </div>
</div>
